<script setup>
    import { getManagerVipList, edit, del, add } from "@/api/managervip"
    import { Search } from "@element-plus/icons-vue"
    import { ref, reactive, computed } from "vue"

    import { ElMessage, ElMessageBox } from 'element-plus'
    
    const region = ref('')
    const rentalType = ref('')
    const searchId = ref('')
    const rentalTypes = ref(['合租','整租'])
    const regions = ref([])

    const dataList = ref([])
    // const finished = ref(false)

    const page = ref(0)
    const currentPage = ref(1)

    const drawer = ref(false)

    const personList = ref({})

    
    getManagerVipList().then(res=>{
        dataList.value = res
        // console.log(res);
        for(let val of res){
            // console.log(val.region);
            if(regions.value.indexOf(val.region)==-1){
                regions.value.push(val.region)
            }
        }
        // console.log(regions);
        
    })
    

    function multiFilter(array, filters) {
        const filterKeys = Object.keys(filters)
        return array.filter((item) => {
            return filterKeys.every(key => {
                if(!filters[key].length) return true
                return !!~item[key].indexOf(filters[key])
            })
        })
    }

    function filterClick(){
        let obj = {
            rentalType: rentalType.value ,
            region: region.value ,
        }
        getManagerVipList().then(res=>{
            dataList.value =  multiFilter(res, obj)
        })

    }


    // const search = ref('')
    // const filterTableData = computed(() =>
    //     tableData.filter(data => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
    //     )
    // )

 /*    function filter(){
        dataList.value = []
        getManagerVipList().then(res=>{
            if(region.value){
                for(let val of res){
                    if(val.region == region.value){
                        dataList.value.push(val)
                    }
                }
            }
            // console.log(rentalType.value,222);
            if(rentalType.value){
                for(let val of res){
                    if(val.rentalType == rentalType.value){
                        dataList.value.push(val)
                    }
                } 
            }
            
        })
        // rentalType
        // region
    } */
    // function addClick(){
    //     add({
    //         id:99999,
    //         name:"zzzz",     //姓名
    //         sex:"男",      //性别
    //         tel:1111111,      //电话    "number|123.1-10": 1 
    //         rentalNum:2222222, //租房编号
    //         adress:'aaaaaaaaa',     // 租房地址
    //         intoTime:'bbbbbbbbbb', 
    //     }).then(res=>{
    //         getManagerVipList({page: page.value}).then(res=>{
    //         dataList.value = res})
    //     })
    // }

    function overView(row){
        drawer.value = true 
        personList.value = row 
    }

    function delClick(row){
        ElMessageBox.confirm('确定删除吗?',
            'Warning',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
            }
        ).then(() => {
            del(row).then(res=>{
                console.log(res);
                getManagerVipList().then(res=>{
                dataList.value = res})
            })
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

    }

    const addDrawer = ref(false)

    let addInfoForm = reactive({
        name: '',
        sex: '',
        tel: '',
        rentalNum:'',
        adress:'',
        intoTime:'',
        leaseType:'',
        director:'',
        })

    function addFn(){
        addDrawer.value = true
    }

    const computedTableData = computed(()=>{  
        return dataList.value.slice((currentPage.value - 1) * 10, (currentPage.value - 1) * 10 + 10)

    })

    // const rules = reactive({
    //     name: [
    //         { required: true, message: 'Please input Activity name', trigger: 'blur' },
    //         { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    //     ],
    //     sex: [
    //         {required: true,message:'不能为空'}
    //     ],
    //     tel: [
    //         {required: true,message:'不能为空'}
    //     ],
    //     rentalNum:[
    //         {required: true,message:'不能为空'}
    //     ],
    //     adress:[
    //         {required: true,message:'不能为空'}
    //     ],
    //     intoTime:[
    //         {required: true,message:'不能为空'}
    //     ],
    //     leaseType:[
    //         {required: true,message:'不能为空'}
    //     ],
    //     director:[
    //         {required: true,message:'不能为空'}
    //     ],
        
    // })


    function addInfo(){
        addInfoForm.id = Math.random()
        // console.log(addInfoForm);
        console.log(addInfoForm);
        add(addInfoForm).then(()=>{

            getManagerVipList().then(res=>{
            dataList.value = res
            })
        })
        cancel()
    }

    function cancel(){
        addInfoForm = reactive({
        name: '',
        sex: '',
        tel: '',
        rentalNum:'',
        adress:'',
        intoTime:'',
        leaseType:'',
        director:'',
        })
        addDrawer.value=false
    }
   
</script>

<template>
  <div >
        <div class="content-header">
            
            <div class="content-header-left">
                <span>片区名称</span>
                <el-select v-model="region" clearable placeholder="选择片区">
                    <el-option v-for="item in regions" :key="item" :label="item" :value="item" />
                </el-select>

                <span>租房类型</span>
                <el-select v-model="rentalType" clearable placeholder="选择租房类型">
                    <el-option v-for="item in rentalTypes" :key="item" :label="item" :value="item" />
                </el-select>

                <el-button type="primary" round @click="filterClick">筛选</el-button>
            </div>

            <div class="content-header-right">
                <el-input v-model="searchId" class="w-50 m-2" style="width:240px" placeholder="请输入需要查询的租房编号" :suffix-icon="Search" />

                <el-button type="primary" round @click="addFn" >添加</el-button>
            </div>

        </div>
      <el-table :data="computedTableData" style="width: 100% " height="700px">
        <el-table-column  prop="name" label="姓名" />
        <el-table-column  prop="sex" label="性别"  />
        <el-table-column  prop="tel" label="电话"  />
        <el-table-column  prop="rentalNum" label="租房编号"/>
        <el-table-column  prop="adress" label="租房地址" width="400px"/>
        <el-table-column  prop="intoTime" label="入住时间" />
        <el-table-column  prop="leaseType" label="长租/短租"/>
        <el-table-column  prop="director" label="租房负责人" />

        <el-table-column prop="id" label="操作" > 
            <template #default="scope">
                <el-button type="primary" link @click="overView(scope.row)">查看</el-button>
                <el-button type="primary" link @click="delClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage" :total="dataList.length" />
    <!-- :page-count="10"  :pager-count="5" -->

    
    <div class="check-drawer">
        <el-drawer v-model="drawer" :show-close='false' size="40%">
            <template #header>
                会员信息资料查看
            </template>
          

            <el-descriptions title="会员信息资料查看" :column="1">

                <el-descriptions-item label="姓名"> {{personList.name}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{personList.sex}}</el-descriptions-item>
                <el-descriptions-item label="电话">{{personList.tel}}</el-descriptions-item>
                <el-descriptions-item label="租房编号">{{personList.rentalNum}}</el-descriptions-item>
                <el-descriptions-item label="租房地址">{{personList.adress}}</el-descriptions-item>
                <el-descriptions-item label="入住时间">{{personList.intoTime}}</el-descriptions-item>
                <el-descriptions-item label="长租/短租">{{personList.rentalType}}</el-descriptions-item>
                <el-descriptions-item label="租房负责人">{{personList.director}}</el-descriptions-item>

            </el-descriptions>
            
            <template #footer>
                <el-button type="primary"  @click="drawer=false">返回</el-button>
            </template>
        </el-drawer>
    </div>

    <div class="add-drawer">
        <el-drawer v-model="addDrawer" :show-close='false' size="40%">
            <template #header>
                新增会员信息
            </template>
            
            <el-form :model="addInfoForm" status-icon label-width="120px" class="demo-ruleForm" >   <!-- :rules="rules"  -->
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addInfoForm.name" type="text" autocomplete="off" />
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                <el-input v-model="addInfoForm.sex"  autocomplete="off" />
                </el-form-item>

                <el-form-item label="电话" prop="tel">
                    <el-input v-model.number="addInfoForm.tel" />
                </el-form-item>

                <el-form-item label="租房编号" prop="rentalNum">
                    <el-input v-model="addInfoForm.rentalNum" />
                </el-form-item>

                <el-form-item label="地址" prop="adress">
                    <el-input v-model="addInfoForm.adress" />
                </el-form-item>

                <el-form-item label="入住时间" prop="intoTime">
                    <!-- <el-input v-model="addInfoForm.intoTime" /> -->
                    <el-date-picker v-model="addInfoForm.intoTime" type="date" placeholder="选择日期" :default-value="new Date()" value-format="YYYY-MM-DD"/>

                </el-form-item>

                <el-form-item label="长租/短租" prop="leaseType">
                    <!-- <el-input v-model="addInfoForm.leaseType" /> -->
                    <el-select v-model="addInfoForm.leaseType" class="m-2" placeholder="请选择" size="large">
                        <el-option label="长租" value="长租"></el-option>
                        <el-option label="短租" value="短租"></el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="租房负责人" prop="director">
                    <el-input v-model="addInfoForm.director" />
                </el-form-item>
                

                <el-form-item>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button type="warning" @click="addInfo">保存</el-button>
                </el-form-item>

            </el-form>


            <template #footer>
                <el-button type="primary"  @click="addDrawer=false">返回</el-button>
            </template>
        </el-drawer>
    </div>


  </div>



</template>

<style lang="scss" scoped>
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
    }
    .content-header .content-header-left{
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 50%;
    }
    .content-header .content-header-right{
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .content-header .content-header-right .el-input {
        margin-right: 10px;
    }

</style>
<!-- <style lang="scss">
        .right-drawer .el-drawer{
            background-color: red;
        }
        #el-id-8307-3 > div > div.el-descriptions__body > table > tbody > tr:nth-child(2) > td{
            margin-top: 50px;
        }
        
        // .right-drawer .el-drawer .el-descriptions-item td {
        //     margin-top: 50px;
        // }
</style> -->